<!--文本-->

<template>
  <section class="news_article-section">
    <MdPreview :editorId="id" :modelValue="content" class="news-text"></MdPreview>
    <div class="news-editor">{{compiler}}</div>
    <!--                    文章页脚-->
    <div class="content-footer">
      <ul class="content-footer-module">
        <li class="content-footer-list">
          <div class="footer-svg collect-svg"></div>
          <div class="footer-text collect-2-text">收藏文章</div>
        </li>
        <li class="content-footer-list">
          <div class="footer-svg write-svg"></div>
          <div class="footer-text write-text">写心得</div>
        </li>
        <li class="content-footer-list">
          <div class="footer-svg share-svg"></div>
          <div class="footer-text share-text">分享到</div>
          <div class="footer-svg bilibili-svg"></div>
          <div class="footer-svg douyin-svg"></div>
          <div class="footer-svg qq-svg"></div>
          <div class="footer-svg wechat-svg"></div>
          <div class="footer-svg redbook-svg"></div>
        </li>
      </ul>
    </div>

  </section>
</template>

<script setup>

import {MdPreview} from "md-editor-v3";
import 'md-editor-v3/lib/preview.css';
import {ref} from "vue";
defineProps({
  content: String,
  compiler: String
})

</script>

<style scoped>
/*新闻文章模块*/

.news_article-section{
  width:100%;
  /*height:80rem;*/
  background-color: rgba(255, 255, 255, 1);
  padding: 3.5rem;
  position: relative;
  margin-bottom: 2rem;
  border-radius: 5px;
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
}
.news-text{
  /*text-indent:3.2rem ;*/
  font-weight:400;
  line-height: 2.3rem;
  font-family:思源黑体;
  font-size: 15px;
}
.news-text:not(:first-child){
  margin-top: 2rem;
}
.news-editor{
  /*position: absolute;*/
  margin-left:46rem;
  margin-top: 2rem;
  font-size: 1.2rem;
}
.content-footer{
  margin: 2rem 0 0rem 26rem;

}
.content-footer-module{
  display: flex;
}
.content-footer-list{
  list-style: none;
  display: flex;
  margin-left: 2rem;
  /*background-color: yellow;*/
}
.footer-svg{
  cursor: pointer;
  width:2rem;
  height:2rem;
  background-size: 1.5rem 1.5rem;
  background-position: center;
}

.footer-text{
  font-size: 10px;
  line-height: 2rem;
  /*margin-left: 0.5rem;*/
  color:rgba(166, 166, 166, 1);
}

.test{
  text-indent: 4rem;
}
</style>
